<template>
  <div class="rose-echart">
    <base-echart :options="options"></base-echart>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import BaseEchart from '@/base-ui/echart'

import { IDataType } from '../types'

const props = defineProps<{
  mapData: IDataType[]
}>()

const options: any = computed(() => {
  return {
    tooltip: {
      triggerOn: 'item'
    },
    visualMap: {
      // 参数范围
      min: 10000,
      max: 100000,
      // 位置跳转
      left: 25,
      bottom: 30,
      showLabel: !0,
      text: ['高', '低'],
      // 渐变颜色范围(数量)
      inRange: {
        color: [
          '#ffffff',
          '#E0DAFF',
          '#ADBFFF',
          '#9CB4FF',
          '#6A9DFF',
          '#3889FF'
        ]
      },
      show: !0
    },
    geo: {
      map: 'china',
      roam: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 40,
      label: {
        show: !0,
        fontSize: '14',
        color: '#c1c4c8'
      },
      itemStyle: {
        borderColor: 'rgba(0, 0, 0, 0.2)'
      },
      // 鼠标移入时高亮
      emphasis: {
        itemStyle: {
          areaColor: '#ffaaa5',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      },
      // 选中时高亮
      select: {
        itemStyle: {
          color: '#ffd3b6'
        }
      }
    },
    series: [
      {
        name: '数量',
        type: 'map',
        geoIndex: 0,
        data: props.mapData
      }
    ]
  }
})
</script>

<style scoped></style>
